<template>
	<view>
		<!-- <u-navbar :title="title" :autoBack="true"></u-navbar> -->
		<view class="container">
			<!-- <view class="title">
				{{info.title}}
			</view> -->
			<view class="time">
				发布时间：{{info.update_time}}
			</view>
			<view>
				<video v-for="(item,index) in info.links_arr" :key="index" style="width: 100%;" id="myVideo" :src="item"
					@play="play(index,item)" :id="`video_${index}`" enable-danmu danmu-btn controls></video>
			</view>
			<u-parse :content="info.content" :tagStyle="style" :domain="domain"></u-parse>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				title: '',
				id: 0,
				info: {},

				style: {
					img: 'display:flex'
				},

				domain: '',
				// videosNvue: '',
			};
		},
		onLoad(options) {
			this.domain = this.$api.domain
			this.id = options.id

			// 通过 id 获取 nvue 子窗体
			// #ifdef APP-PLUS
			// this.videosNvue = uni.getSubNVueById('videos-popup')
			// // 打开 nvue 子窗体
			// this.videosNvue.show('fade-in', 100, function() {
			// 	// 打开后进行一些操作...  
			// 	//   
			// });
			// #endif
			this.loadData();
		},
		methods: {

			async loadData() {
				uni.showLoading({
					title: '加载中...'
				});

				let url = '/detail';
				let res = await this.$myRequest({
					url: url,
					data: {
						id: this.id
					}
				})
				// console.log(res)
				this.info = res.data.data;
				this.title = this.info.title;
				uni.hideLoading();
			},

			//播放视频
			play(currentIndex, id) {
				// this.addViewNum(id)
				let _this = this;
				//播放当前视频
				uni.createVideoContext(`video_${currentIndex}`, _this).play();
				_this.info.links_arr.forEach((item, index) => {
					// 获取json对象并遍历, 停止非当前视频
					if (currentIndex != index) {
						// 暂停其余视频
						uni.createVideoContext(`video_${index}`, _this).pause(); //暂停视频播放事件
					}
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #f7f7f7;
		font-size: $uni-font-size-base;
	}
</style>
<style lang='scss'>
	page {
		background-color: #f2f2f2;
		padding: 20rpx 20rpx 40rpx 20rpx;

		box-sizing: border-box;
		font-size: 28rpx;


	}

	.container {
		background-color: #ffffff;
		padding: 24rpx;
		padding-top: 0;
		border-radius: 10rpx;
		position: relative;
		// #ifdef APP-PLUS
		top: 20rpx;
		// #endif

		// #ifdef H5
		top: 100rpx;
		// #endif

		// #ifdef MP-WEIXIN
		top: 165rpx;
		// #endif

	}

	.title {
		font-size: 28upx;
		color: #333;
		text-align: center;
		height: 40px;
		line-height: 40px;
		font-weight: bold;
	}

	.time {
		font-size: 26upx;
		color: #a7a6a6;
		text-align: center;
		height: 30px;
		line-height: 30px;
	}
</style>